<!DOCTYPE html>
<html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>选项卡</title>
        </head>
        <style>
            *{
                margin: 0px;
                padding: 0px;
                list-style: none;
            }
            body{
            background-image:url(images/pic.03.jpg);
            background-repeat: no-repeat;
            background-size:100% auto;   
        }
        ul{
            overflow: hidden;
        }
        ul li{
            float: left;
            width: 410px;
            text-align: center;
            cursor: pointer;

        }
        p{
            width: 150px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            display: none;
        }
        li.one{
            background: rgb(231, 104, 20);
            border-radius:20px ;
            color: white;
        }
        p.one{
            background: rgb(226, 221, 217);
            border-radius:20px ;
            display: block;
        }
        }

        </style>       

        <body>
            <ul>
                <li class="one"> 祝愿</li>
                <li>所有考生</li>
                <li>高考顺利</li>

            </ul>
            <div>
                <p class="one">旗开得胜</p>
                <p>水滴石穿</p>
                <p>马到成功</p>
            </div>

            <script>
        var tags=document.getElementsByTagName('li');

        var cons=document.getElementsByTagName('p');

        for(var i=0; i<tags.length; i++){

            tags[i].zsh=i;

            tags[i].onclick=function(){

                for(var t=0; t<tags.length;t++){

                    tags[t].className='';

                    cons[t].classNmae='';

                }

                this.className="one";
                
                var n=this.zsh;

                cons[n].className='one'

            }
        }


            </script>
        </body>
        </html>